<template>
  <div>
<!--    查询框-->
    <div style="margin: 10px 0">
      <el-input size="small" style="width: 300px;"  placeholder="请输入文章名称" v-model="name" suffix-icon="el-icon-search"></el-input>
      <el-button  size="small" class="ml-5" type="primary" @click="search">搜索</el-button>
      <el-button size="small"  @click="reset">重置</el-button>
    </div>


<!--  主体表-->
<!--    <el-table :data="tableData" border stripe :header-cell-style="tableHeaderColor"-->
<!--              @selection-change="handleSelectionChange">-->
<!--      <el-table-column-->
<!--          type="selection"-->
<!--          width="55">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="id" label="ID" width="50">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="name" label="文章名称" ></el-table-column>-->
<!--      <el-table-column prop="content" label="文章内容" >-->
<!--        <template slot-scope="scope">-->
<!--          <el-button @click="view(scope.row.content)" type="primary">查看文章</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="user" label="作者"></el-table-column>-->
<!--      <el-table-column prop="time" label="发布时间" ></el-table-column>-->

<!--      <el-table-column label="操作"  align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="warning" @click="handleEdit(scope.row)" v-if="user.role==='ROLE_ADMIN'">编辑 <i class="el-icon-edit"></i></el-button>-->
<!--          <el-popconfirm  title="确定删除吗？" @confirm="del(scope.row.id)"-->
<!--                          class="ml-5">-->
<!--            <el-button type="danger" slot="reference" v-if="user.role==='ROLE_ADMIN'">删除 <i class="el-icon-remove-outline"></i></el-button>-->
<!--          </el-popconfirm>-->

<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    文章列表-->
    <div style="margin: 10px 0">
      <div style="padding:15px 0;border-bottom: 1px dashed #cccccc"
           v-for="item in tableData" :key="item.id">
        <div style="font-size: 20px;color: #409EFF;cursor: pointer" @click="$router.push('/front/articleDetail?id='+item.id)">{{item.name}}</div>
        <div style="font-size: 14px;margin-top: 4px;color: #8c939d">
          <i class="el-icon-user-solid"><span>{{item.user}}</span></i>
          <i class="el-icon-time" style="margin-left: 10px"><span>{{item.time}}</span></i>
        </div>
      </div>
    </div>

<!--    分页插件-->
    <div style="padding:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    return{
      tableData: [],
      total:0,
      pageNum:1,
      pageSize:10,

      //查询部分
      name:"",

      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],

      form:{},
      dialogFormVisible:false,
      dialogFormVisible2:false,
      multipleSelection:[],
      roles:[],
      content:'',
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{}
    }
  },
  created() {
    this.load()
  },
  methods:{
    view(content){
        this.content=content
        this.dialogFormVisible2=true
    },
    imgAdd(pos, $file){
      let $vm=this.$refs.md
      //将图片上传到服务器
      const formData = new FormData();
      formData.append('file',$file)
      axios({
        url:'http://localhost:9090/file/upload',
        method:'post',
        data: formData,
        headers:{'Context-Type':'multipart/form-data'}
      }).then((res)=>{
          $vm.$img2Url(pos,res.data);
      })
    },

    changeState(row){
      this.request.post("/article",row).then(res=>{
        if(res.code === '200'){
          this.$message.success("操作成功")
        }
      })
    },
    handleAdd(){
      this.dialogFormVisible=true
      this.form={}
    },
    handleEdit(row){
      this.form=row
      this.dialogFormVisible=true
    },
    reset(){
      this.name=""
      this.score=""
      this.teacher=""
      this.pageNum=1
      this.load()
    },
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection=val
    },
    delBatch(){
      let ids=this.multipleSelection.map(v=>v.id)  //[ {},{},{}] => [1,2,3]
      this.request.post("/article/del/batch",ids).then(res=>{
        if(res.code==='200'){
          this.$message.success("批量删除成功")
          this.load()
        }else{
          this.$message.error("批量删除失败")
        }
      })
    },
    load(){
      this.request.get("/article/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          name:this.name
        }
      }).then(res =>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })

    },
    search(){
      this.request.get("/article/page",{
        params:{
          pageNum:1,
          pageSize:this.pageSize,
          name:this.name,
        }
      }).then(res =>{
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    del(id){
      this.request.delete("/article/"+id).then(res=>{
        if(res.code==='200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    save(){ //新增或修改
      this.form.user=this.user.username
      this.request.post("/article",this.form).then(res =>{

        if(res.code==='200'){
          this.$message.success("保存成功")

          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败")
          this.load()
        }
      })

    },
    cancel(){
      this.dialogFormVisible=false
      this.load()
    },

    tableHeaderColor({row,column,rowIndex,columnIndex}){
      return 'background-color:lightblue;color:#fff;font-size:15px;'
    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize=pageSize;
      this.load()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum;
      this.load()
    }
  }
}
</script>

<style scoped>

</style>